<template>

	<view class="route-map flex--col">
		<Loading v-if="loading">正在加载中</Loading>
		<template v-else>
			<view class="route-map-spots">
				<RouteSpots :spotIndex="spotIndex" @changeSpotIndex="handleChangSpotIndex" :routeAttractionsList="route.routeAttractionsList"></RouteSpots>
			</view>
			<LocationMap :height="50" :attractionPositions="route.routeAttractionsList" :locatePosition="route.routeAttractionsList[spotIndex]" v-if="route"></LocationMap>
		</template>
	</view>
</template>

<script>
	import RouteSpots from "@/components/RouteSpots/RouteSpots.vue"
	import LocationMap from "@/components/LocationMap/LocationMap.vue"
	import Loading from "@/components/Loading/Loading.vue"
	import * as RouteApi from "@/api/route/route.js"
	export default {
		props:['routeId'],
		components:{
			RouteSpots
		},
		data(){
			return {
				loading:true,
				route:null,
				spotIndex:0
			}
		},
		methods:{
			async getRouteData(){
				this.route = await RouteApi.routeDetail(this.routeId)
				this.loading = false
			},
			handleChangSpotIndex(index){
				this.spotIndex = index
			}
		},
		async mounted(){
			await this.getRouteData()
		}
		
	}
</script>

<style lang="scss" scoped>
	.route-map{
		position:relative;
		height:100%;
		justify-content: space-between;
		
		&-spots{
			@include border-four-roundings;
			padding:16px;
		}
	}
</style>